<template>
    <div class="quotes px-32  pb-108">
        <div class="px-32 py-13 flex items-center">
            <!-- <img src="@/assets/image/icon-left_arrow.png" alt="logo" class="w-20 h-33 border-1 mr-32" @click="back"/> -->
            <div class="inputBoxbg h-60 w-full rounded-full flex items-center">
                <img src="@/assets/image/icon-search.png" alt="logo" class="w-32 h-32 mx-16" />
                <input type="text" v-model="keywords" :placeholder="$t('搜索币种')"
                    class="h-full flex-1 border-none bg-none" @input="onInput" />
            </div>
        </div>
        <van-tabs v-model="active" swipeable :animated="isAnimated" sticky :beforeChange="beforeChange">
            <van-tab :title="item.text" v-for="item in tabList" :key="item.id" :name="item.id" class="broder-r-grey">
                <list-quatation :showMore="false" :list-data="item.data" :tabActive="active">
                    <div class="flex border-t-grey items-center bg-white px-32 h-100 w-full font-24"
                        v-if="active === 1">
                        <p class="w-160 h-44 rounded bg-grey text-center mr-20 flex justify-center items-center"
                            style="background: #EAECEF; padding: 0 5px">
                            {{ $t('现货/合约') }}</p>
                        <!-- <p class="w-80 h-44 rounded text-center text-grey flex justify-center items-center">合约</p> -->
                    </div>
                </list-quatation>
                <div v-if="!item.data.length" class="flex flex-col justify-center items-center pt-185">
                    <img src="@/assets/image/assets-center/no-data.png" alt="no-date" class="w-180 h-180" />
                    <p class="textColor">{{ $t('暂无数据') }}</p>
                </div>
            </van-tab>
        </van-tabs>
        <Footer></Footer>
    </div>
</template>

<script>
import { Tab, Tabs } from 'vant'
import ListQuatation from "@/components/list-quotation";
import { _myCoins, _getHomeList } from '@/API/home.api'
import { mapGetters, mapActions } from "vuex";
import { SET_COIN_LIST } from '@/store/const.store'
export default {
    name: 'PageQoutes',
    components: {
        ListQuatation,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs
    },
    async created() {
        this.active = this.$route.query.active / 1
       if(this.userInfo.token){
        const list = await _myCoins() // 获取我的自选
         this.myList = list.map(item => item.symbol) // 获取
       }
       await this.fetchQoutes()
    },
    computed: {
        ...mapGetters({ coinList: 'home/coinList', userInfo: 'user/userInfo' }),
    },
    data() {
        const arr = []
        for(let i = 0; i< 10; i++) {
            arr.push({id: i})
        }
        return {
            tabList: [
              { id: 1, text: this.$t('自选'), data: arr, loading: true },
              { id: 2, text: this.$t('现货'), data: arr, loading: true },
              { id: 3, text: this.$t('合约'), data: arr, loading: true }
            ],
            keywords: '', // 搜索关键字
            filterData: [],
            myList: [],
            active: 1,

            timeout: null,
            inputTimeout: null,
            duration: 1000,
            isAnimated:false
        }
    },
    methods: {
        ...mapActions('home', [SET_COIN_LIST]),
        async fetchQoutes() { // 现货/合约
            if (!this.coinList.length) {
                await this.SET_COIN_LIST()
            }
           const coins = this.coinList.map(item => item.symbol)
           const data = await _getHomeList(coins.join(','))
           console.log(data)
           this.tabList[0]['data'] = data.filter(item => this.myList.includes(item.symbol))
           this.tabList[1]['data'] = data
           this.tabList[2]['data'] = data
           if (this.keywords) { // 过滤数据
                this.getFilterData()
           }
           if (this.timeout) {
               clearTimeout(this.timeout)
               this.timeout = null
           }
           this.timeout = setTimeout(() => {
               this.fetchQoutes()
           }, this.duration)
        },
        getFilterData() { // 过滤后的数据
            const index = this.active / 1 - 1
            console.log(index)
            this.tabList[index]['data'] = this.tabList[index]['data'].filter(item => item.symbol.includes(this.keywords.toLocaleLowerCase()))
        },
        back() {
            this.$router.go(-1)
        },
        onInput() { // 输入
            if (this.inputTimeout) {
                clearTimeout(this.inputTimeout)
                this.inputTimeout = null
            }
            this.inputTimeout = setTimeout(() => {
                this.getFilterData()
            }, 50)
        },
        beforeChange(){
            this.keywords = ''
            return true
        },
        startTimeout() {
            this.clearTimeout()
            this.fetchQoutes()
        },
        clearTimeout() {
            if (this.timeout) {
                clearTimeout(this.timeout)
                this.timeout = null
            }
        }
    },
    async activated() {
        console.log('sss')
        this.startTimeout()
        if (this.userInfo.token) {
            const list = await _myCoins() // 获取我的自选
            this.myList = list.map(item => item.symbol) // 获取
        }
        this.tabList[0].text = this.$t('自选')
        this.tabList[1].text = this.$t('现货')
        this.tabList[2].text = this.$t('合约')
    },
    deactivated() {
        this.clearTimeout()
    },
    beforeDestroy() {
       this.clearTimeout()
        if (this.inputTimeout) {
            clearTimeout(this.inputTimeout)
            this.inputTimeout = null
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.isAnimated= true;
        })
    }
}

</script>
<style lang="scss" scoped>
.quotes{
    box-sizing: border-box;
    width: 100%;
    background: $main_background;
}
.quotes ::v-deep .van-tabs__nav {
background: $main_background;
}
.quotes ::v-deep .van-tab--active {
    color: $text_color;
}
.inputBoxbg{
    background: $tab_background;
}
</style>
